<template>
    <div class="classTest">
        <div class="classTask" @click.stop>
            <shiti :QuestionDATA="classTaskSHITI"></shiti>
            <div class="pen" @click="openTaskList">
                <transition name="el-zoom-in-bottom">
                    <ul class="classTaskList" v-show="chooseTest">
                        <li v-for="(item,index) in QuestionDATA.child.Detail" @click.stop="closeTaskList(QuestionDATA.child.Detail[index].ResourceID,index)" :class="{'activeItem':chooseItem===index}">{{index+1}}
                        </li>
                    </ul>
                </transition>
            </div>
        </div>
    </div>
</template>
<script type="text/ecmascript-6">
    import store from '../../store/'
    import shiti from './shiti.vue'

    export default {
        name: "",
        props: ["QuestionDATA", "showModel"],
        data () {
            return {
                chooseTest: false,
                chooseItem: 0,
                classTaskSHITI: {
                    child: {
                        QuestionTypeCode: ''
                    }
                }
            }
        },
        mounted(){
            var _this = this;
            var load = layer.load(2, {time: 10*1000});
            this.$http.get(('api/resource/get?ids=' + _this.QuestionDATA.child.Detail[0].ResourceID + '&sk=' + store.state.token)).then(function (res) {
                _this.classTaskSHITI = res.data.data[0]
                 _this.classTaskSHITI.QuestionTypeCode =  _this.classTaskSHITI.child.QuestionTypeCode
                layer.close(load);
            })
        },
        components: {
          shiti
        },
        methods: {
            openTaskList(){
                if (this.chooseTest == false) {
                    this.chooseTest = true
                } else {
                    this.chooseTest = false
                }
            },
            closeTaskList(ResourceID,index){
                var load = layer.load(2, {time: 10*1000});
                var _this = this
                _this.chooseItem = index;
                this.$http.get(('api/resource/get?ids=' + ResourceID + '&sk=' + store.state.token)).then(function (res) {
                    _this.classTaskSHITI = res.data.data[0]
                    _this.classTaskSHITI.QuestionTypeCode =  _this.classTaskSHITI.child.QuestionTypeCode
                    layer.close(load);
                    _this.openTaskList();
                })
            }
        }
    }
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
@import '../../assets/css/public.scss';

.classTest {
    position: fixed;
    background: rgba(0, 0, 0, .62);
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 9999;
    .TaskWarp {
        width: 100%;
        height: 100%;
    }
    .classTask {
        height: 100%;
        width: 100%;
        position: absolute;
        background: #fff;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        .pen {
            position: absolute;
            width: 252px;
            height: 28px;
            background: url("../../assets/pen.png") no-repeat;
            bottom: 20px;
            left: 20px;
            cursor: pointer;
            z-index: 10000;
            .classTaskList {
                width: 210px;
                position: absolute;
                bottom: 30px;
                left: 0;
                right: 0;
                margin: auto;
                background-color: #f5f5f5;
                -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
                display: flex;
                flex-wrap: wrap;
                li {
                    width: 60px;
                    height: 60px;
                    margin: 5px;
                    text-align: center;
                    line-height: 58px;
                    color: #fff;
                    background-color: #20a0ff;
                    border: 1px solid #20a0ff;
                    border-radius: 10px;
                    box-sizing: border-box;
                    cursor: pointer;
                    box-shadow: inset 0 0 40px rgba(0, 0, 0, .3);
                }
                li.activeItem {
                    background: #ff3ff4;
                    border: 1px solid #ff3ff4;
                }
                li:hover {
                    background-color: rgba(32, 160, 255, 0.8);
                }
                li.activeItem:hover {
                    background: rgba(255, 63, 244, 0.8);
                }
            }
        }
    }
}

.classTaskList {
    list-style: none;
    li {
        list-style: none;
    }
}
</style>